@charset "UTF-8";
@import "element";
@import "common";
@import "grid";

// im global style variables
:root {
  // main color
  --im-color-primary: #{$--color-primary};
  --im-color-primary-light-1: #{$--color-primary-light-1};
  --im-color-primary-light-2: #{$--color-primary-light-2};
  --im-color-primary-light-3: #{$--color-primary-light-3};
  --im-color-primary-light-4: #{$--color-primary-light-4};
  --im-color-primary-light-5: #{$--color-primary-light-5};
  --im-color-primary-light-6: #{$--color-primary-light-6};
  --im-color-primary-light-7: #{$--color-primary-light-7};
  --im-color-primary-light-8: #{$--color-primary-light-8};
  --im-color-primary-light-9: #{$--color-primary-light-9};

  --im-color-sucess: #{$--color-success};
  --im-color-warning: #{$--color-warning};
  --im-color-danger: #{$--color-danger};
  --im-color-info: #{$--color-info};
  --im-color-white: #fff;

  // text color
  --im-text-color: #{$--color-text-regular};
  --im-text-color-light: #999999;
  --im-text-color-lighter: #C0C4CC;

  // text size
  --im-font-size: #{$--font-size-base};
  --im-font-size-small: #{$--font-size-small};
  --im-font-size-smaller: #{$--font-size-extra-small};
  --im-font-size-large: #{$--font-size-medium};
  --im-font-size-larger: #{$--font-size-large};
  --im-font-family: #{$--font-family};

  // border color
  --im-border: 1px solid #EBEEF5;

  // shadow
  --im-box-shadow: #{$--box-shadow-base};
  --im-box-shadow-light: #{$--box-shadow-light};
  --im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
  --im-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);

  // bg
  --im-background: #F3F3F3;
  --im-background-active: #F1F1F1;
  --im-background-active-dark: #E9E9E9;

  // Login/Register.vue
  --login-banner-image: url('../../../src/assets/image/all/login-banner.png');
  --login-button-image: url('../image/all/login-button.png');
  --login-bg-color: var(--im-color-white);
  --login-form-border-color: rgba(44, 45, 58, 1);
  --login-title-color: var(--im-color-white);
  --login-active-color: #11a8ec;
  --register-login-bg-color: rgba(232, 240, 249, 1);
  --register-login-color: rgba(21, 101, 192, 1);
  --register-avatar-bg-color: #88d7fb;
  --register-avatar-edit-bg: #135bad;

  // EChatHeader.vue
  --mask-bg-color: rgba(44, 45, 58, 1);
  --notification-title-color: #291c0a;
  --notification-desc-title-color: #0d1217;
  --notification-desc-color: #4c555f;
  --loading-color: #03a9f4;

  // AddFriend.vue
  --search-username-border-color: rgba(208, 209, 219, 1);
  --search-friend-empty-image: url('../image/all/add-friend-empty.png');

  // E-Chat Chats
  --chat-theme-color: rgba(19, 92, 175, 1); // #135caf
  --chat-header-logo: url('../image/all/e-chat-logo.png');
  --chat-header-bg: url('../../assets/image/all/chat-header-bg.png');
  --chat-header-title-color: var(--im-color-white); // var(--im-color-white)
  --chat-header-icon-color: var(--im-color-white);
  --chat-nav-bg: var(--im-color-white);
  --chat-nav-color: #646566;
  --chat-nav-active-color: linear-gradient(126.6deg, rgba(64, 196, 255, 1) 0%, rgba(3, 169, 244, 1) 100%);
  --chat-content-bg: var(--im-color-white); // #3c3c3c  var(--im-color-white)


  --chat-bg-active: #f0f0f3; //#e7f3ff
  --chat-bg-active-dark: #e7f3ff;
  --chat-unred-text-bg: rgba(64, 196, 255, 1);
  --chat-error-color: #f56c6c;
  --chat-at-text-color: #c70b0b;
  --chat-name-text-color: #2c2d3a;
  --chat-time-text-color: rgba(104, 106, 138, 1); // rgba(154, 155, 177, 1)
  --chat-nickname-text-color: #000;
  --chat-text-color-light: rgba(154, 155, 177, 1);
  --user-online-online: limegreen;
  --add-icon-popover-hover-bg: rgba(240, 240, 243, 1);
  --slot-color: #f2f3f5; //#f6f7f8
  --chat-error-text-color: #f44336;

  // Contacts.vue
  --contact-name-color: #000;

  // Profile.vue

}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

section {
  height: 100%;
}

.el-dialog__body {
  padding: 10px 20px !important;
}

// scrollbar style
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: hsla(0, 0%, 73%, .5);
}

::-webkit-scrollbar-track {
  border-radius: 4px;
}

.search-input {
  .el-input__inner {
    border: unset !important;
  }
}
